import classNames from "classnames"
import { useContext } from "react"
import { MenuContext } from "./menu"

export interface MenuItemProps {
    index?: string
    disabled?: boolean
    className?: string
    /**选项的自定义 style */
    style?: React.CSSProperties
    children?: React.ReactNode
}
const MenuItem = ({
    className,  
    children,
    index,
    style,
    disabled = false
}:MenuItemProps) => {
    // 连接上下文
    const context = useContext(MenuContext)
    const classes = classNames('menu-item',className,{
        'is-disabled':disabled,
        'is-active':index === context.index
    })
    const handleClick = () => {
        if(context.onSelect && !disabled && (typeof index === 'string')) {
            context.onSelect(index)
        }
    }
    
    return (
        <li className={classes} style={style} onClick={handleClick}>
            { children }
        </li>
    )
    
}

MenuItem.displayName = 'MenuItem'

export default MenuItem